<template>
	<scroll-view class="full box relative collect-guide-wrapper" scroll-y>
		<view class="guide-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
			<view class="guide-avatar">
				<image :src="item.image" mode="aspectFill" class="full"></image>
			</view>
			<view class="guide-info">
				<view class="guide-name">
					<text>{{ item.name }}</text>
				</view>
				<view class="guide-remark">
					<text>{{ item.introduce }}</text>
				</view>
			</view>
			<view class="collect-icon" @click.stop="cancelCollect(item.id)">
				<u-icon name="star-fill" size="44rpx" color="#8BDCFF"></u-icon>
			</view>
		</view>
		<view class="empty-wrapper" v-if="isEmpty">
			<u-empty text="暂无收藏" icon="/pages-bundle/static/icon/collect-empty.png" />
		</view>
		<view class=" loadmore-wrapper">
			<u-loadmore icon-color="#3c9cff" :status="status" loading-icon="semicircle" />
		</view>
	</scroll-view>
</template>

<script>
	import { LOAD_MORE } from '@/constant/index.js'
	export default {
		onLoad(ev) {},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: `/pages-bundle/guide-detail/guide-detail?id=${id}&event=1`
				})
			},
			cancelCollect(id) {
				uni.showModal({
					content: '您确定取消收藏吗?',
					title: '提醒',
					success: async ev => {
						if (ev.cancel) return
						const resp = await this.$request({
							url: "/TourGuide/cancelCollect",
							data: { id },
						})
						const { code, msg } = resp
						this.$toast({ title: msg })
						if (code !== 1) return
						const index = this.list.findIndex(item => item.id === id)
						if (index === -1) return
						this.list.splice(index, 1)
					}
				})
			},
			async initData(clear = false) {
				if (clear) {
					this.page = 1
					this.isEmpty = false
					this.list = []
					this.status = LOAD_MORE.LOADING
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				const { page, pageSize } = this
				const resp = await this.$request({
					url: "/index/getMyCollect",
					data: { page, list_rows: pageSize, type: 2 },
				})
				console.log(resp, 'resp');
				await this.$delay(320)
				const { code, data, msg } = resp
				if (code !== 1) {
					this.hasInit = false
					this.status = LOAD_MORE.LOAD_MORE
					return this.$toast({ title: msg })
				}
				this.hasInit = true
				if (Array.isArray(data) && !data.length) {
					this.isEmpty = this.list.length === 0
					this.status = LOAD_MORE.NO_MORE
					return
				}
				const { current_page, per_page, total, data: list } = data
				console.log(list, 'list');
				if (!!list && list.length) {
					this.list.push(...list.map(item => {
						const { introduce, name, image, id } = item
						return { introduce, name, image, id }
					}))
				}
				this.isEmpty = this.list.length === 0
				const hasMore = current_page * per_page < total
				if (hasMore) {
					this.page += 1
					this.status = LOAD_MORE.LOAD_MORE
					return
				}
				this.status = LOAD_MORE.NO_MORE
			},
		},
		computed: {},
		data() {
			return {
				list: [],
				page: 1,
				pageSize: 15,
				isEmpty: false,
				status: LOAD_MORE.LOAD_MORE,
				hasInit: false,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-guide-wrapper {
		padding: 0 32rpx;

		.guide-item {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.collect-icon {
				flex-shrink: 0;
			}

			.guide-info {
				margin: 0 28rpx 0 16rpx;
				box-sizing: border-box;
				flex: 1;
				height: 84rpx;
				position: relative;

				.guide-remark {
					width: 100%;
					height: 32rpx;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 32rpx;
					margin-top: 8rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.guide-name {
					height: 44rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
				}
			}

			.guide-avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;
			}
		}
	}
</style>